{% extends "base.html" %}
{% from "macros/form_field.html" import form_field %}
{% block title %}Profilo{% endblock %}
{% block content %}
<div class="content-section shadow-sm p-3 mb-5 bg-white rounded">
	<div class="media">
        <img class="account-img rounded-circle mx-auto d-block" src="{{ image_file }}" height="150" width="150" >
        <div class="media-body">
			<h2 class="account-heading">Benvenuto, {{ current_user.name }}</h2>
			<p class="text-secondary">email: {{ current_user.email }}</p>
			<h3>I tuoi dati:</h3>
		</div>
	</div>
	<!--FORM-->
<div class="content-section">
        <form method="POST" enctype="multipart/form-data">

            {{ form.hidden_tag() }}
            <fieldset class="form-group">
{#                <legend class="border-bottom mb-4">Your personal infos:</legend>#}
                <div class="form-group ">

                    {{ form.username.label(class="form-control-label") }}
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">@</div>
                        </div>
                    {% if form.username.errors %}
                        {{ form.username(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.username.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.username(class="form-control form-control-lg") }}
                    {% endif %}
                    </div>
                    <div class="container">
                        <br/>
                    <h2>Competenze</h2>


                    	<div class="row mb-1">

                    		<!-- <form id="framework_form" method="post"> -->
                    		<div class="col-sm-3">
                    		<label>Select your skills</label>
                                </div>
                                <div class="col-sm-9" style="text-align:right">
                                    {#  Button delete skills with open popup window #}
                                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#Modal2">
                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                    </button>
                                <button type="button" title="Add new skills" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                               Add new skills
                            </button>
                </div>
                            </div>
                                <div class=" mb-5">
                            {{ form.owned_skills(id="f", type="text", class="form-control form-control-chosen") }}
                                            <!-- Button trigger modal -->


                    		<!-- </form> -->


                    		</div>



                </div>
                <form method="post">
               <div class="form-group">
                    {{ form.picture.label() }}
                   <div class="custom-file" id="customFile" style=".custom-file-input ~ .custom-file-label::after { content: 'Button Text'; }" >
                        {{ form.picture(class="custom-file-input", id="customFile", type="file", accept=".jpg,.jpeg,.gif,.png") }}
                        <label class="custom-file-label" for="customFile">Choose image</label>
                   </div>
                    {% if form.picture.errors %}
                        {% for error in form.picture.errors %}
                            <span class="text-danger">{{ error }}</span></br>
                        {% endfor %}
                    {% endif %}
               </div>
                              <input class="btn btn-primary" type="submit" name="btn" value="Update">

                </form>




                <!-- Modal pop Up Window -->
                <form method="POST">
                            <div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                              <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLongTitle">Remove a skill</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">×</span>
                                    </button>
                                  </div>


                                  <div class="modal-body">

                                  {{ formRM.hidden_tag() }}
                                         <select id="single" class="form-control form-control-chosen" name="skillRemoveSelect">
                                              {% for xx in formRM.skillRemove.data %}
                                                  <option value="{{ xx }}">
                                                    {{ xx }}
                                                  </option>
                                                {% endfor %}
                                         </select>

                                      </div>

                                      <div class="modal-footer">
                                          <div class="form-group">
    {#                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>#}
                                            <input class="btn btn-danger" type="submit" name="btn" value="Remove">

                                          </div>
                                      </div>


                                </div>
                              </div>
                            </div>


                <!-- Modal -->
                            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                              <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLongTitle">Add a skill</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">×</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    {{ form.skills(class="form-control form-control-chosen") }}
                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                      <input class="btn btn-primary" type="submit" name="btn" value="Save">
                                      {# {{ form.submitNS(class="btn btn-primary", value="Save", name="btn" ) }} #}
                                  </div>
                                </div>
                              </div>
                            </div>

                </form>
                </div>

            </fieldset>

        </form>
    </div>




	<!-- END FORM-->
</div>
<script type="text/javascript">
	$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})


$('#modal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})




	$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})
</script>

<script type="text/javascript">

  {#$(".form-control-chosen").attr('disabled', true).trigger("chosen:updated")#}


    $('#myModal').on('shown.bs.modal', function () {
      $('#myInput').trigger('focus')
    })

    $('#exampleModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var recipient = button.data('whatever') // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)
      modal.find('.modal-title').text('New message to ' + recipient)
      modal.find('.modal-body input').val(recipient)
    })

</script>

<script type="application/javascript">
    $('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        $('.custom-file-label').html(fileName);
    });
</script>
<!--
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.6/chosen.jquery.min.js"></script>

{% endblock %}